import styles from './index.less'
import { useEffect, useState } from 'react'
import { ReactComponent as ChatGptSvg } from '../../assets/chatgpt.svg'
import { Button } from 'antd-mobile'
import my from '../../assets/my.png'
import Dropdown from '../dropdown'

const PopupMenu = ({popupVisible, setPopupVisible}: any) => {
	const [visible, setVisible] = useState<boolean>(false)

	useEffect(() => {
		if (!popupVisible) {
			setVisible(popupVisible)
		}
	}, [popupVisible])

	return (
		<div className={styles.box_view}>
			<div className={styles.top_view}>
				<div className={styles.title_view}>
					<div className={styles.logo_view}>
						<ChatGptSvg />
					</div>
					<h2>Deepseek</h2>
				</div>

			</div>
			<div className={styles.bottom_view}>
				<Button onClick={() => setVisible(true)}>
					<div className={styles.user_info}>
						<img src={my} alt='head sculpture' />
						<h2>You</h2>
					</div>
				</Button>
			</div>
			{visible && <Dropdown setDropdownVisible={(e:boolean) => setVisible(e)} setPopupVisible={(e:boolean) => setPopupVisible(e)} />}
		</div>
	)
}

export default PopupMenu